<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue-swiper</title>
    <link rel="stylesheet" href="lib/swiper.css">
    <script src="lib/vue.js"></script>
    <script src="lib/axios.min.js"></script>
    <script src="lib/swiper.js"></script>
    <style>
        img {
            width: 100%;
            height: 300px;
        }
    </style>
</head>

<body>
    <div id="box">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <!-- v-swiper里面传参可以解决参数问题  
                    关键是指令虽然只能传一个参数，但是没有限制类型，所以：v-swiper可以传对象-->
                <div v-swiper="{index:index,length:datalist.length}" class="swiper-slide"
                    v-for="(data,index) in datalist" :key="data.channelid">
                    <img :src="data.thumb">
                </div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>

            <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>

    </div>

    <script>
        //自定义指令轮播
        Vue.directive("swiper", {
            inserted(el, bind) {
                console.log(el);
                console.log(bind);
                console.log(bind.value);
                //如果所有的即最后一个节点都mounted到dom树了，那么初始化swiper就恰到好处了。
                // bind.value === 数组长度-1
                //以上两个参数那里拿到呢？看html部分
                if (bind.value.index === bind.value.length - 1) {
                    //swiper
                    new Swiper('.swiper-container', {
                        direction: 'horizontal', // 垂直切换选项
                        loop: true, // 循环模式选项

                        // 如果需要分页器
                        pagination: {
                            el: '.swiper-pagination',
                        },

                        // 如果需要前进后退按钮
                        navigation: {
                            nextEl: '.swiper-button-next',
                            prevEl: '.swiper-button-prev',
                        },
                    })
                }
            }
        })
        new Vue({
            el: "#box",
            data: {
                datalist: []
            },
            mounted() {
                axios.get("https://api.apiopen.top/musicBroadcasting").then(res => {
                    console.log(res.data.result[0].channellist);
                    this.datalist = res.data.result[0].channellist;
                }).catch(err => {
                    console.log(err);
                })
            }
        })
    </script>

</body>

</html>